<template  v-if="bye">
  <div style="padding: 14px 14px 0">
    <RouteTitle />
    <div class="flex justify-between align-center">
      <a-tabs v-model:activeKey="activeKey">
        <a-tab-pane key="1" tab="员工" />
        <a-tab-pane key="2" tab="角色权限" />
      </a-tabs>
      <a-row justify="end">
        <a-col>
          <a-space>
            <span v-if="activeKey == 1">还可以添加<span style="margin: 0 3px; color: red">{{
              account_total
            }}</span>员工</span>
            <a-button type="primary" :disabled="activeKey == 1 && account_total == 0 ? true : false"
              style="border: none; border-radius: 6px" @click="addStaffClick">
              {{ activeKey == 1 ? "添加员工" : "添加角色" }}
            </a-button>
          </a-space>
        </a-col>
      </a-row>
    </div>

    <a-spin :spinning="spinning" :style="{ height: spinning ? '50vh' : '' }">
      <a-row class="staff-list" :gutter="[16, 16]" v-if="total > 0">
        <a-col :span="8" v-for="item in list" :key="item.id" style="padding: 10px">
          <a-row justify="space-between" align="middle" class="staff" :wrap="false">
            <a-col>
              <a-row align="middle">
                <a-col class="avatar">
                  <a-avatar :size="64">
                    <template #icon>
                      <img :src="item.avatar ? item.avatar : defaultAvarat" />
                    </template>
                  </a-avatar>
                  <div class="tipStatus" :class="item.status == 1 ? '' : 'disable-status'">
                    {{ item.status == 1 ? "已启用" : "已禁用" }}
                  </div>
                </a-col>
                <a-col>
                  <div class="title">
                    {{
                      activeKey == 1
                        ? item.nickname
                          ? item.nickname
                          : "--"
                        : item.name
                    }}
                  </div>
                  <div style="color: #999" v-if="activeKey == 1">
                    角色:
                    {{
                      item.team_user_role
                        ? item.team_user_role.name
                        : "未配置角色"
                    }}
                  </div>
                  <div style="color: #999" v-else>
                    创建时间: {{ item.created_at }}
                  </div>
                  <div style="color: #999" v-if="activeKey == 1">
                    手机号:  {{item?.phone_txt }}
                  </div>
                </a-col>
              </a-row>
            </a-col>
            <a-col>
              <a-popover placement="bottom" v-model:visible="item.popoverVisible" @visibleChange="visiblePopoverChange">
                <template #content>
                  <div v-if="item.hasIpManage">
                    <a-button type="link" @click.stop="bindMatrix(item)">绑定矩阵账号</a-button>
                  </div>
                  <div>
                    <a-button type="link" @click.stop="editClick(item.id)">编辑</a-button>
                  </div>
                  <a-popconfirm :title="activeKey == 1 ? '确认删除该用户吗?' : '确认删除该角色吗?'
                    " ok-text="确定" cancel-text="取消" :disabled="item.is_current_login" @confirm="deleteClick(item.id)">
                    <a-button type="link" :disabled="item.is_current_login">删除</a-button>
                  </a-popconfirm>
                </template>
                <ellipsis-outlined style="font-size: 40px" />
              </a-popover>
            </a-col>
          </a-row>
        </a-col>
      </a-row>
      <div v-else class="empty">
        <a-empty></a-empty>
      </div>
    </a-spin>

    <!-- 添加员工 -->
    <!-- <addUser @onClose="onConfirmStaff"  :visible="visibleStaff"></addUser> -->
    <StaffDrawer :ispower="ispower" :visible="visibleStaff" @onCancel="onCancelStaff" :id="edit_id" @onConfirm="onConfirmStaff" :accountId="accountId" @onAccountCancel="onAccountCancel" @onAccountChange="onAccountChange"/>

    <!-- 添加角色 -->
    <RoleDrawer :visible="visibleRole" :id="edit_id" @onCancel="onCancelRole" @onConfirmRole="onConfirmRole" />

      <!-- 充值弹窗 -->
  <vipModal :visible="vipVisible" @close="vipVisible = false"></vipModal>

  </div>
</template>

<script>
import {
  defineComponent,
  reactive,
  toRefs,
  computed,
  createVNode,
  watch,
} from "vue";
import CreateFixed from "../components/CreateFixed/index.vue";
import {
  EllipsisOutlined,
  ExclamationCircleOutlined,
} from "@ant-design/icons-vue";
import { onBeforeRouteLeave } from "vue-router";

import StaffDrawer from "./modules/StaffDrawer.vue";
import RoleDrawer from "./modules/RoleDrawer.vue";
import { Modal, message, notification } from "ant-design-vue";
import request from "@/common/utils/request";
import store from "../../../store/index";
import { useRouter } from "vue-router";
// 充值弹窗
import vipModal from '@/socialMedia/Vip/vipModal.vue'
import addUser from "@/components/InviteMember/index.vue";
export default defineComponent({
  name: "Index",
  components: { EllipsisOutlined, StaffDrawer,vipModal, RoleDrawer, addUser },
  setup() {
    const state = reactive({
      vipVisible:false,
      bye: true,
      account_total: 0,
      count: 0,
      activeKey: "1",
      visibleStaff: false,
      spinning: false,
      total: 0,
      page: 1,
      pageSize: 200,
      visibleRole: false,
      list: [],
      userList: [],
      isAdmin: false,
      toDoNum: 0,
      edit_id: "",
      ispower: false,
      accountId:0
    });
    const router = useRouter();
    let defaultAvarat = computed(() => {
      return new URL(
        `../../../common/image/workShotstackImage/${state.activeKey == 1 ? "user.png" : "role.png"
        }`,
        import.meta.url
      ).href;
    });
    const addStaffClick = () => {
      
      if (store.getters.isVersionExpired) {
        notification.warn({ message: "您的套餐已到期", duration: 2 });
       state.vipVisible = true;
      } else {
        if (state.activeKey == 1) {
          state.visibleStaff = true;
        } else {
          state.visibleRole = true;
        }
      }

    };

    const onConfirmStaff = () => {
      state.edit_id = "";
      state.visibleStaff = false;
      getList();
    };
    const onCancelStaff = () => {
      state.edit_id = "";
      state.visibleStaff = false;
    };

    const onConfirmRole = () => {
      state.edit_id = "";
      state.visibleRole = false;
      getList();
    };
    const onCancelRole = () => {
      state.edit_id = "";
      state.visibleRole = false;
    };

    const getList = () => {
      let url = "";
      let params = {
        page: state.page,
        pageSize: state.pageSize,
      };
      if (state.activeKey == 1) {
        url = "/user/team/member/list";
        params.team_id = store.state.user.teamId;
      } else {
        url = "/user/team/role/list";
      }
      state.spinning = true;
      request.get("/work_ai", url, params).then((res) => {
        state.list = res.list;
        state.total = res.total;
        if (state.activeKey == 1) {
          state.account_total = res.account_total;
        }
        state.spinning = false;
        if (res.power == 1) {
          state.ispower = true
        }
      });
    };

    watch(
      () => state.activeKey,
      () => {
        state.list = [];
        getList();
      },
      { immediate: true }
    );
    // 操作：同意、拒绝
    const editClick = (id) => {
      if (store.getters.isVersionExpired) {
        notification.warn({ message: "您的套餐已到期", duration: 2 });
        state.vipVisible = true;

      } else {
        state.edit_id = id;
        if (state.activeKey == 1) {
          state.visibleStaff = true;
        } else {
          state.visibleRole = true;
        }
      }

    };
    // 删除
    const deleteClick = (id) => {
      if (store.getters.isVersionExpired) {
        notification.warn({ message: "您的套餐已到期", duration: 2 });
        state.vipVisible = true;

      } else {
        let url =
          state.activeKey == 1
            ? "/user/team/member/delete"
            : "/user/team/role/delete";
        request
          .del("/work_ai", url, {
            id,
          })
          .then((res) => {
            message.success("删除成功");
            state.page = 1;
            getList();
          });
      }

    };

    // 绑定矩阵账号
    const bindMatrix=(item)=>{
      item.popoverVisible = false
      state.ispower = true
      state.accountId = 0
      setTimeout(()=>{
        state.accountId = item.id
        state.edit_id = item.id
      },10)
     

    }


    const onAccountCancel =()=>{
      state.accountId = 0
    }

    const onAccountChange=()=>{
      state.accountId = 0
    }

    onBeforeRouteLeave((to, from, next) => {
      state.bye = false
      next(true)
    });
    return {
      ...toRefs(state),
      addStaffClick,
      onConfirmStaff,
      editClick,
      onConfirmRole,
      deleteClick,
      onCancelRole,
      onCancelStaff,
      defaultAvarat,
      bindMatrix,
      onAccountCancel,
      onAccountChange,
    };
  },
});
</script>

<style lang="less" scoped>
.staff-list {
  .staff {
    padding: 20px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(0, 0, 0, 0.05);
    position: reactive;

    .title {
      font-weight: 500;
      font-size: 18px;
    }

    .avatar {
      margin-right: 10px;
    }

    .tipStatus {
      position: absolute;
      bottom: -8px;
      left: 5px;
      width: 55px;
      text-align: center;
      color: #fff;
      border-radius: 10px;
      background: rgb(68, 191, 134);
      padding: 0 5px;
    }
  }
}

.empty {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 60vh;
}

.disable-status {
  background-color: #adadad !important;
}
</style>
